<template>
  <div class="content" ref="containerRef" :style="`height: ${contentHeight}px;`">
    <div class="d-flex justify-between pt-10px">
      <div class="fullBtn ml-10px" @click="showFullScreen">{{ showFull ? '关闭' : '全屏' }}</div>
      <timeData class="time" />
    </div>
    <div class="plan" v-loading="partListLoading">
      <div class="title">
        <div>生产计划列表</div>
      </div>
      <div class="tab">
        <el-row class="tabName">
          <el-col :span="2">订单号</el-col>
          <el-col :span="2">订单类型</el-col>
          <el-col :span="2">客户代码</el-col>
          <el-col :span="2">产品编号</el-col>
          <el-col :span="2">产品名称</el-col>
          <el-col :span="2">产品规格</el-col>
          <el-col :span="2">部件名称</el-col>
          <el-col :span="1">计划数量</el-col>
          <el-col :span="2">计划开始日期</el-col>
          <el-col :span="2">计划结束日期</el-col>
          <el-col :span="3">计划进度与实际进度(%)</el-col>
          <el-col :span="2">任务状态</el-col>
        </el-row>
        <div :style="`height: ${contentHeight * 0.45 * 0.75}px; overflow: hidden;`">
          <Vue3SeamlessScroll
            :list="scrollData"
            :step="0.1"
            :hover="true"
            :limitScrollNum="5"
            :isWatch="true"
            :copyNum="2"
          >
            <el-row
              class="tabItem"
              :class="{ bg: index % 2 !== 0, active: partDetailIndex === index }"
              v-for="(item, index) in scrollData"
              :key="index"
            >
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['orderNumber'] }}</div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">
                    <dict-tag type="market_order_type" :value="item['dictOrderType']" />
                  </div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['customerCode'] }}</div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['productNumber'] }}</div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['productName'] }}</div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['productStandard'] }}</div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['partType'] }}</div>
                </div>
              </el-col>
              <el-col :span="1">
                <div class="wordWrap">
                  <div class="word">{{ item['orderQuantity'] }}</div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['planStartDate'] }}</div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div class="word">{{ item['planEndDate'] }}</div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="wordWrap">
                  <div style="width: 100%">
                    <el-progress
                      class="mb-5px"
                      :percentage="item['planProgress'] || 0"
                      :color="customColorMethod(item['status'])"
                    />
                    <el-progress
                      :percentage="item['actualProgress'] || 0"
                      :color="customColorMethod(item['status'])"
                    />
                  </div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="wordWrap">
                  <div
                    class="status mr-10px"
                    :style="`background-color: ${customColorMethod(item['status'])}`"
                  ></div>
                  <div class="word">{{ item['status'] }}</div>
                </div>
              </el-col>
            </el-row>
          </Vue3SeamlessScroll>
        </div>
      </div>
    </div>
    <div class="process" v-loading="processLoading">
      <div class="title">
        <div>产品生产进度明细</div>
      </div>
      <Echart :options="barOptionsData" :height="contentHeight * 0.45 * 0.9" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { timeDiff } from '@/utils/formatTime'
  import { set } from 'lodash-es'
  import dayjs from 'dayjs'
  import * as ProductionApi from '@/api/visualized/production'
  import { EChartsOption } from 'echarts'
  import { barOptions } from './echarts-data'
  import { getDictLabel } from '@/utils/dict'
  import timeData from '../components/time.vue'
  import echarts from '@/plugins/echarts'
  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

  const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
  const containerRef = ref()
  const contentHeight = ref()
  contentHeight.value = document.body.clientHeight - 125
  const process = ref<string[]>([]) //进度
  const scrollData = ref([]) //部件列表
  const partListLoading = ref(false) //部件列表加载
  const processLoading = ref(false) //进度加载
  let partDetailIndex = ref(0) //获取部件详情id下标
  let scrollPartDetailTime = null //部件详情生产进度定时器
  let scrollPartListTime = null //部件列表定时器
  const showFull = ref(false) //是否全屏

  // 全屏/退出全屏
  const showFullScreen = () => {
    let el = document.querySelector('.content')
    if (showFull.value) {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      }
    } else {
      // 全屏
      if (el.requestFullscreen) {
        el!.requestFullscreen()
      } else if (el.mozRequestFullScreen) {
        el!.mozRequestFullScreen()
      } else if (el.webkitRequestFullScreen) {
        el!.webkitRequestFullScreen()
      }
    }
    showFull.value = !showFull.value
  }

  // 获取部件详情进度
  const getProcess = async () => {
    processLoading.value = true
    try {
      const data = await ProductionApi.getScreenProductionPartDetail(
        scrollData.value[partDetailIndex.value]['id']
      )
      // const data = await ProductionApi.getScreenProductionPartDetail(15)
      // 计划开始时间
      barOptionsData!.series![0].data = data.partDetail.map((v) => {
        return new Date(v.planStartDate)
      })
      // 计划结束时间
      barOptionsData!.series![1].data = data.partDetail.map((v) => {
        return new Date(v.planEndDate)
      })
      barOptionsData!.series![2].data = data.partDetail.map((item) => {
        // 实际结束时间  计划开始时间 + 间隔天数 * 实际进度
        let actualDate = new Date(
          dayjs(item.planStartDate)
            .add(
              Math.floor(timeDiff(item.planStartDate, item.planEndDate, 'day') * item.actualProgress),
              'day'
            )
            .toString()
        )
        if (dayjs().isAfter(dayjs(item.planEndDate))) {
          //当前时间在计划结束时间之后 标红
          return {
            value: actualDate,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(255,94,68,0.80)'
                },
                {
                  offset: 1,
                  color: 'rgba(255,94,68,0.30)'
                }
              ]),
              borderColor: '#0D202A'
            }
          }
        } else {
          return {
            value: actualDate,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(0,210,215,0.80)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,210,215,0.30)'
                }
              ]),
              borderColor: '#0D202A'
            }
          }
        }
      })
      process.value = data.partDetail.map((item) => {
        return getDictLabel('craft_process_name', item.dictProcessName)
      })
      set(barOptionsData, 'yAxis.data', process.value)
    } finally {
      processLoading.value = false
    }
  }

  // 获取部件列表
  const getPartList = async () => {
    partListLoading.value = true
    try {
      scrollData.value = await ProductionApi.getScreenProductionPartList()
    } finally {
      partListLoading.value = false
    }
  }

  // 设置部件列表进度颜色
  const customColorMethod = (status: string) => {
    switch (status) {
      case '未开始':
        return '#529BFF'
      case '进行中':
        return '#00D2D7'
      case '已完成':
        return '#51E392'
      case '已延时':
        return '#FF5E44'
      case '已暂停':
        return '#FFF336'
      case '已取消':
        return '#80A3A2'
    }
  }

  onMounted(async () => {
    await getPartList()
    getProcess()
    scrollPartDetailTime = setInterval(() => {
      if (partDetailIndex.value === scrollData.value.length - 1) {
        partDetailIndex.value = 0
      } else {
        partDetailIndex.value += 1
      }
      getProcess()
    }, 19000)
    scrollPartListTime = setInterval(() => {
      getPartList()
    }, 3600000)
    window.addEventListener('resize', () => {
      if (showFull.value) {
        // 全屏时高度为视口高度
        contentHeight.value = document.body.clientHeight
      } else {
        contentHeight.value = document.body.clientHeight - 125
      }
    })
  })

  onBeforeUnmount(() => {
    clearInterval(scrollPartDetailTime)
    clearInterval(scrollPartListTime)
    scrollPartDetailTime = null
    scrollPartListTime = null
  })
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    background-image: url('@/assets/production/index_bg.png');
    background-size: 100% 100%;
    overflow: hidden;

    .d-flex {
      display: flex;
    }

    :deep(.el-progress-bar__outer) {
      background-color: #1e484f;
    }

    :deep(.el-progress__text) {
      color: #fff;
    }

    .align-center {
      align-items: center;
    }

    .fullBtn {
      width: 40px;
      height: 26px;
      text-align: center;
      cursor: pointer;
      border: 1px solid #45e0dc;
      border-radius: 5px;
      background: linear-gradient(0deg, #45e0dc 0%, #161f24 59%, #161f24 100%);
      color: #45e0dc;
    }

    .title {
      font-size: 18px;
      font-weight: 600;
      color: #d4fffb;
      width: 732px;
      height: 41px;
      background-image: url('@/assets/production/index_title.png');
      background-size: 100% 100%;
      box-sizing: border-box;
      overflow: hidden;

      div {
        margin-left: 62px;
        margin-top: 12px;
      }
    }

    .time {
      text-align: right;
    }

    .plan {
      height: 47%;
      width: 98%;
      margin: 0 auto;

      .tab {
        text-align: center;

        .bg {
          background-color: rgb(44 86 88 / 20%);
        }

        .tabName {
          background-color: rgb(44 86 88 / 20%);
          color: #7cc9c2;
          height: 56px;
          line-height: 56px;
        }

        .tabItem {
          height: 64px;
          color: #fff;
          word-wrap: break-word;

          &.active {
            border: 1px solid #00d2d7;
          }

          .wordWrap {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          }

          .word {
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .status {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
          }
        }
      }
    }

    .process {
      height: 47%;
      width: 98%;
      margin: 0 auto;

      .tab {
        text-align: center;
      }

      .item {
        color: #7cc9c2;
        display: flex;
      }

      .processName {
        width: 8%;
      }

      .cycle {
        width: 92%;
      }
    }
  }
</style>